<template>
  <h2>defineEmits</h2>
  <div class="note">
    <p>1. 定义事件用defineEmits,便于调用多事件</p>
    <p>2. 可以写一个函数，在函数里面emit('函数名')</p>
    <p>3. 在父组件里对事件定义函数自调用</p>
    <p>4. 应用场景：当父组件需要在子组件的基础上传入一些值，做一些修改时使用</p>
  </div>

  <hr class="hr-style" />
  <div class="test">
    <p>{{ t }}</p>
    <button 
    type="button"
    @click="
    ()=>{
      isShow = !isShow
      emit('sonEmit')
    }"
    >
    emit触发父组件绑定子组件上的函数</button>
  </div>
  <div v-show="isShow" style="height: 100px;width:100px;background-color: blue;"></div>

  <button type="button" @click="editTitle">
    emit触发父组件绑定子组件上的函数2(修改title的值)
  </button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const emit = defineEmits(['sonEmit','sonEmit2'])

const isShow = ref(false)
export interface Iuser {
  name: string
  sex: string
  age: number
}

const {
  title = '江山如此多娇,引无数英雄竞折腰',
  msg,
  user
} = defineProps<{
  title?: string
  user?: Iuser
  msg?: string
}>()

const t = ref(title)

const editTitle = ()=>{
  t.value = '数风流人物,还看今朝'
  emit('sonEmit2')
}
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
